<template>
  <range-input-component></range-input-component>
</template>

<script setup lang="tsx">
import { FormItem, RangeInput } from 'tdesign-vue-next';
import { inject, Ref } from 'vue';

import { TDFormItemType } from '../type.d';

const {
  componentAttribute = {},
  formItemAttribute = {},
  name,
} = defineProps<{
  componentAttribute: TDRangeInputType;
  name: string;
  formItemAttribute: TDFormItemType;
}>();

type TDRangeInputType = InstanceType<typeof RangeInput>['$props'];

const defaultComponentAttribute: TDRangeInputType = {
  placeholder: `请输入${formItemAttribute.label || ''}`,
  clearable: true,
};
const defaultFormItemAttribute: TDFormItemType = {
  name,
  rules: [
    {
      required: true,
      message: `${formItemAttribute.label || '此项'}必填`,
      trigger: 'change',
    },
    {
      validator: (value: string[]) => ({
        result: value[0]?.length > 0 && value[1]?.length > 0,
        message: `${formItemAttribute.label || '此项'}必填`,
        type: 'error',
      }),
    },
    {
      validator: (value: string[]) => ({
        result: value[0] === value[0]?.trim() && value[1] === value[1]?.trim(),
        message: '文本前后不能带有空格',
        type: 'error',
      }),
    },
  ],
};

const modelValue: Ref = inject('dynamicFormData');

const RangeInputComponent = (
  <FormItem {...defaultFormItemAttribute} {...formItemAttribute}>
    <RangeInput v-model={modelValue.value[name]} {...defaultComponentAttribute} {...componentAttribute} />
  </FormItem>
);
</script>

<style scoped></style>
